<template>
    <div class="page animate__animated animate__fadeIn">
        <el-card :bordered="false" shadow="never" class="ivu-mt" :body-style="{ padding: '20px 20px 0' }">
            <el-form size="small" inline label-position="right">
                <el-form-item label="商品分类" prop="categoryIds">
                    <el-cascader v-model="searchForm.categoryId" :options="cateGoryList" :clearable="true" :props="{
                        label: 'name',
                        value: 'category_id',
                        checkStrictly: true
                    }" ref="cascader" placeholder="请选择上级分类"></el-cascader>
                </el-form-item>
                <el-form-item label="状态">
                    <el-select v-model="searchForm.apply_status" placeholder="请选择" clearable @clear="clearStatus">
                        <el-option value="10" label="通过">审核通过</el-option>
                        <el-option value="20" label="待审核">待审核</el-option>
                        <el-option value="30" label="审核驳回">审核驳回</el-option>
                    </el-select>
                </el-form-item>
                <!-- <el-form-item label="商品搜索" label-for="keyword">
                    <el-input v-model="searchForm.keyword" placeholder="请输入内容" clearable>
                        <el-select v-model="searchForm.search_type" slot="prepend" style="width: 100px">
                            <el-option value="0" label="全部"></el-option>
                            <el-option value="2" label="商品名称"></el-option>
                            <el-option value="3" label="商品编码"></el-option>
                        </el-select>
                    </el-input>
                </el-form-item> -->
                <el-form-item label="商品名称" label-for="goods_name">
                    <el-input v-model="searchForm.goods_name" placeholder="请输入商品名称" clearable></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="toSearch">查询</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="showImport = true">导入商品</el-button>
                </el-form-item>
            </el-form>
        </el-card>
        <el-card :bordered="false" shadow="never" class="ivu-mt" :body-style="{ padding: '10px 20px 20px' }">
            <el-tabs v-model="searchForm.listType" @tab-click="handleClick">
                <el-tab-pane label="全部" name="all"></el-tab-pane>
                <el-tab-pane label="出售中" name="on_sale"></el-tab-pane>
                <el-tab-pane label="已下架" name="off_sale"></el-tab-pane>
                <el-tab-pane label="已售罄" name="sold_out"></el-tab-pane>
            </el-tabs>
            <el-button type="success" icon="el-icon-plus" @click="addGoods()" size="small">添加商品</el-button>
            <el-button-group class="ml">
                <el-button icon="el-icon-top" plain size="small" @click="switchStatus(10)">上架</el-button>
                <el-button icon="el-icon-bottom" plain size="small" @click="switchStatus(20)">下架</el-button>
                <el-button icon="el-icon-delete" plain size="small" @click="delGoods(1)">删除</el-button>
            </el-button-group>
            <el-table size="small" header-cell-class-name="table_header_cell" :data="list" v-loading="isLoading"
                class="table-mt" @selection-change="handleSelectRow" :row-key="getRowKey" ref="goodsTable">
                <el-table-column type="selection" width="55" :reserve-selection="true">
                </el-table-column>
                <!-- <el-table-column prop="goods_id" label="商品ID" width="80">
                </el-table-column> -->
                <el-table-column prop="xuhao" label="序号" width="80">
                </el-table-column>
                <el-table-column prop="name" label="商品图片" width="100">
                    <template slot-scope="scope">
                        <el-image :src="scope.row.goods_image" fit="contain" class="list-img">
                            <div slot="error" class="image-slot">
                                <p>暂无图片</p>
                            </div>
                        </el-image>
                    </template>
                </el-table-column>
                <el-table-column prop="goods_name" label="商品名称" min-width="300">
                </el-table-column>
                <el-table-column prop="goods_price_min" label="平台价">
                </el-table-column>
                <el-table-column prop="stock_total" label="库存">
                    <template slot-scope="scope">
                        <div class="stock" @click="modifyStock(scope.row.goods_id)">
                            <span>{{ scope.row.stock_total }}</span>
                            <i class="el-icon-edit"></i>
                            <!-- <el-tag size="mini">修改</el-tag> -->
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="producer" label="产地">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.producer" type="success" size="mini">
                            {{ scope.row.producer }}</el-tag>
                        <el-tag v-else type="info" size="mini">暂无</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="sort" label="排序"> </el-table-column>
                <el-table-column prop="status" label="状态" align="center">
                    <template slot-scope="scope">
                        <el-button class="up-btn" size="mini" :type="scope.row.status == 10 ? 'success' : 'warning'"
                            plain @click="switchSingleStatus(scope.row.goods_id, scope.row.status)">{{ scope.row.status
                                == 10 ? '上架' :
                                '下架'
                            }}</el-button>
                    </template>
                </el-table-column>
                <el-table-column prop="apply_status" label="审核状态" align="center">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.apply_status == 10" size="mini" type="success">审核通过</el-tag>
                        <el-tag v-if="scope.row.apply_status == 20" size="mini">待审核</el-tag>
                        <el-tag v-if="scope.row.apply_status == 30" size="mini" type="warning">审核驳回</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作" fixed="right" width="200px">
                    <template slot-scope="scope">
                        <el-button type="text"
                            @click="editGoods(scope.row.status, scope.row.goods_id, 1, scope.row.apply_status)">编辑</el-button>
                        <el-button type="text" @click="editGoods(0, scope.row.goods_id, 2)">查看详情</el-button>
                        <el-button type="text" @click="delGoods(2, scope.row.goods_id)">删除</el-button>
                    </template>
                </el-table-column>
                <div slot="empty" class="empty">
                    <el-empty description="暂无数据" />
                </div>
            </el-table>
            <pagination v-if="searchForm.total" :total="searchForm.total" :page.sync="searchForm.page"
                :limit.sync="searchForm.limits" @pagination="getGoodsList" />
        </el-card>
        <edit-stock ref="stock" @reload='getGoodsList'></edit-stock>
        <import-goods :show="showImport" @close="showImport = false" @result="importResHandler"
            :type="'ZY'"></import-goods>
    </div>
</template>

<script>
import { goodsList, setGoodsStatus, cateGoryList, destroyGoods } from "@/api/goods";
import EditStock from './components/editStock.vue';
import importGoods from '@/components/importGoods.vue';
export default {
    components: { EditStock, importGoods },
    data() {
        return {
            searchForm: {
                page: 1,
                limits: 15,
                total: 0,
                listType: 'all',
                goods_type: 20,
                // search_type: '0',
                // keyword: '',
                goods_name: '',
                categoryId: '',
                categoryId: '',
                company_id: '',
                apply_status: ''
            },
            isLoading: false,
            list: [],
            goodsIds: [],
            showRadio: false,
            selectedRows: [],// 已选行数据
            checkedLabel: '',
            cateGoryList: [],
            showImport: false, // 导入商品组件开关
        };
    },

    /**
     * 数据发生改变
     */

    /**
     * 创建完毕
     */
    created() {
        this.isLoading = true;
        this.getGoodsList();
        this.getCateGoryList();
    },
    mounted() {
        // this.goodsCascader()

    },

    /**
     * 里面的方法只有被调用才会执行
     */
    methods: {
        // 样例模板导入处理函数
        importResHandler() {
            // 获取最新数据
            this.isLoading = true;
            this.getGoodsList();
            this.getCateGoryList();
        },
        handleClick(tab) {
            this.searchForm.listType = tab.name;
            this.reload()
        },
        clearStatus() {
            this.searchForm.apply_status = '';
            this.reload()
        },
        toSearch() {
            if (this.searchForm.categoryId.length > 0) {
                const category_id = this.searchForm.categoryId[this.searchForm.categoryId.length - 1];
                this.searchForm.categoryId = category_id;
            }
            this.reload()
        },
        reload() {
            this.isLoading = true;
            this.list = [];
            this.searchForm.page = 1;
            this.getGoodsList()
        },
        getCateGoryList() {
            cateGoryList({
                status: "-1",
                company_id: this.searchForm.company_id,
            }).then((res) => {
                this.isLoading = false;
                if (res.code == 0) {
                    // res.data.forEach(v => {
                    //     if (!v.children) {//一级下面没有子元素
                    //         v.disabled = true;
                    //     } else {
                    //         v.children.forEach(item => {
                    //             if (!item.children) {
                    //                 item.disabled = true;
                    //             }
                    //         })
                    //     }
                    // })
                    this.cateGoryList = res.data;
                }
            });
        },
        //获取商品列表
        getGoodsList() {
            goodsList(this.searchForm).then((res) => {
                this.isLoading = false;
                if (res.code == 0) {
                    this.list = res.data.data;
                    this.searchForm.total = res.data.total;
                }
            });
        },
        getRowKey(row) {
            return row.goods_id;
        },
        handleSelectRow(val) {
            this.selectedRows = val;
            this.goodsIds = this.selectedRows.map(v => {
                return v.goods_id
            })
        },
        //修改库存
        modifyStock(id) {
            this.$refs.stock.show();
            this.$refs.stock.goodsId = id;
            this.$refs.stock.loadingPage = true;
            this.$refs.stock.getGoodsDetail();
        },
        //修改商品上下架状态
        switchStatus(e) {
            if (this.goodsIds.length == 0) {
                this.$message.error('还未选择商品')
                return;
            }
            setGoodsStatus({
                goodsIds: this.goodsIds.join(","),
                state: e,
            }).then(res => {
                if (res.code == 0) {
                    this.$message.success(res.msg)
                    this.getGoodsList()
                }
            })
        },
        switchSingleStatus(id, status) {
            const state = status == 20 ? 10 : 20;
            setGoodsStatus({
                goodsIds: `${id}`,
                state,
            }).then(res => {
                if (res.code == 0) {
                    this.$message.success(res.msg)
                    this.getGoodsList()
                }
            })
        },
        //删除商品
        delGoods(type, goods_id) {
            const that = this;
            let goodsIds;
            // this.goodsIds.join(",")
            if (type == 1) {
                goodsIds = this.goodsIds.join(",")
                if (this.goodsIds.length == 0) {
                    this.$message.error('还未选择商品')
                    return;
                }
            } else {
                goodsIds = goods_id;
            }
            console.log('goodsIds', goodsIds);
            this.$confirm('此操作将删除选中商品, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                destroyGoods({
                    goodsId: goodsIds
                }).then(res => {
                    if (res.code == 0) {
                        that.$message.success(res.msg);
                        // 清空删除数组
                        that.goodsIds = []
                        that.getGoodsList()
                    }
                })
            })
        },
        //跳转添加商品页
        addGoods() {
            this.$router.push("/goods/add");
        },
        //编辑商品
        editGoods(status, id, type, apply_status) {
            if (status == 10) {
                this.$message.error('请先下架商品再进行编辑操作！');
                return;
            }
            if (apply_status == 20) {
                this.$message.error('商品审核中，不能进行编辑操作！');
                return;
            }
            this.$router.push({
                path: '/goods/edit',
                query: {
                    id,
                    type,
                }
            })
            // this.$router.push(`/goods/edit/${id}`);
        },
    },
};
</script>

<style scoped>
/deep/ .image-slot {
    color: #c0c4cc;
    background: #f5f7fa !important;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.up-btn {
    padding: 4px 6px;
}

.label-icon {
    font-size: 12px;
}

.ml {
    margin-left: 15px;
}

.stock {
    cursor: pointer;
}

.stock:hover {
    color: var(--main-color);
}

.stock p {
    margin-right: 10px;
}

.stock i {
    font-weight: bold;
}
</style>
